<template>
  <!-- 频道编辑 -->
  <div class="channel-edit">
    <van-cell center :border="false">
      <div slot="title">我的频道</div>
      <van-button
      type="danger"
      plain
      round
      size="mini"
      @click="isEdit = !isEdit"
      >{{ isEdit ? '完成' : '编辑'}}</van-button>
    </van-cell>
<!-- 下面的宫格使用vant中的插件 -->
    <van-grid :gutter="10">
    <van-grid-item
    :class="{ active: index === active}"
     v-for="(channel,index) in channels"
    :key="index+'van'"
     @click="ondel(index)"
    :icon="(isEdit && index !== 0) ? 'clear': ''"
    :text="channel.name" />
    </van-grid>
<!-- 频道推荐 -->
      <van-cell center :border="false">
      <div slot="title">频道推荐</div>
      <van-button
      type="danger"
      plain
      round
      size="mini"
      >编辑</van-button>
    </van-cell>
<!-- 下面的宫格使用vant中的插件 -->
    <van-grid :gutter="10">
    <van-grid-item
    v-for="(channel,index) in recommendChannels"
    :key="index+'item'"
    @click="onAdd(channel)"
    :text="channel.name" />
    </van-grid>
  </div>
</template>

<script>
import { getAllChannels } from '@/api/channe'
export default {
  name: 'Channel_edit',
  props: {
    channels: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      allChannels: [], // 所有频道数据列表
      isEdit: false // 控制编辑的显示状态
    }
  },
  created () {
    this.loadAllChannels()
  },
  methods: {
    async loadAllChannels () {
      const { data } = await getAllChannels()
      // this.allChannels.push(data.data.channels)
      this.allChannels = data.data.channels
    },
    onAdd (channel) {
      // console.log(channel)
      this.channels.push(channel)
      // 这里需要数据的持久化，才可以刷新之后依旧显示添加的数据
    },
    ondel (index) {
      // 如果是编辑状态 删除频道
      // 如果是非编辑状态 就是切换频道
      if (this.isEdit && index !== 0) {
        // 现在就是编辑状态 删除频道
        this.deleteChannel(index)
      } else {
        // 现在就是非编辑状态 切换频道
        this.switchChannel(index)
      }
    },
    deleteChannel (index) {
      // 如果删除的是当前激活频道之前的频道
      if (index <= this.active) {
        // 更新激活频道的索引
        this.$emit('update-active', this.active - 1)
      }
      this.channels.splice(index, 1)
      // console.log('删除频道')
      // 数据持久化
    },
    switchChannel (index) {
      console.log('切换频道')
      this.$emit('close')
      // 关闭弹出层
      this.$emit('update-active', index)
    }
  },
  computed: {
    // 推荐的频道列表
    recommendChannels () {
      // 思路：所有频道-我的频道=剩余的推荐频道
      // filter 方法：过滤数组，根据这个方法返回的布尔值true来收集数据
      return this.allChannels.filter(channel => {
        // 判断channel是否属于用户频道
        // filter查找满足条件的所有元素
        return !this.channels.find(userChannel => {
          // 找到满足该条件的元素
          // find方法查找满足条件的单个元素
          return this.channels.id === userChannel.id
        })
      })
    }
  }
}
</script>

<style lang="less">
  .channel-edit {
    padding-top: 15%;
    .van-cell__title {
      font-size: 1.3em;
      color:#333333;
    }
    .van-grid-item__content {
      background-color: #f4f5f6;
      .van-grid-item__text {
        font-size: 0.3em;
        color: #222222;
        margin-top: 0;
      }
    }
    .van-grid-item__icon {
      position: absolute;
      right: 0.05rem;
      top: 0.05rem;
      font-size:0.8em;
      color: #ccc;
    }
    .active {
      .van-grid-item__text {
        color: red;
      }
    }
  }
</style>
